<template>
    <div id="NewsFollow">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="待回复" name="0"></el-tab-pane>
          <el-tab-pane label="已回复" name="1"></el-tab-pane>
        </el-tabs>
        <div class="news-item" v-for="data in list" :key="data.messageId">
            <img class="userName" :src="current_state === '1'?data.adminHeadImg:data.userHeadImg" alt="" @click="toCenter(current_state === '1'?data.replyId:data.userId)">
            <div  class="news-wrap">
                <b @click="toCenter(current_state === '1'?data.replyId:data.userId)" class="userName">{{current_state === '1'?data.adminNickname:data.userNickname }}</b>
                <p class="news-message">{{current_state === '1'?data.reply:data.question}}</p>
                <p class="news-time">{{data.creatTime}}</p>
            </div>
            <div class="news-control">
                <span class="news-browse" v-if="current_state === '1'" @click="throughFun(data.question)">查看留言</span>
                <span class="news-browse" @click="delMsg(data.messageId)">删除</span>
            </div>
        </div>
        <el-empty :image-size="200" v-if="list.length === 0"></el-empty>
        <div class="pageControl">
        <el-pagination
          class="pages"
          background
          layout="prev, pager, next"
          :total="total"
          :hide-on-single-page="list.length < 10"
          :current-page="current_page"
          :page-size=10
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
</template>
<script>
export default {
  name: 'NewsFollow',
  data () {
    return {
      total: 1,
      current_page: 1,
      current_state: '0',
      list: {},
      userMsg: '',
      activeName: '0'
    }
  },
  methods: {
    handleClick (tab) {
      console.log(tab.index === '1')
      if (tab.index !== this.current_state) {
        this.current_state = tab.index
        this.current_page = 1
        this.getData()
      }
    },
    getData () {
      this.$axios({
        method: 'get',
        url: '/Menu/User/queryMessage',
        params: {
          pageStart: this.current_page,
          pageSize: '10',
          type: 1,
          state: this.current_state
        }
      }).then(data => {
        this.list = data.data.object.list
        this.total = data.data.object.total
      }).catch(error => {
        console.log(error)
      })
    },
    delMsg (messageId) {
      console.log(messageId)
      this.$confirm('是否确认删除此消息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'delete',
          url: '/Menu/User/deleteMessage',
          params: {
            messageId
          }
        }).then(data => {
          console.log(data.data)
          if (data.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getData()
          }
        }).catch(error => {
          console.log(error)
        })
      })
    },
    toCenter (userId) {
      this.$router.push({
        name: 'CenterRecipes',
        params: {
          userId
        }
      })
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.current_page = val
      this.getData()
    },
    throughFun (key) {
      this.$alert(key, '我的留言', {
        confirmButtonText: '确定'
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>
<style lang="less" scoped>
.userName{
    &:hover{
        cursor: pointer;
    }
}
.pageControl{
  text-align: center;
  margin-top: 40px !important;
}
</style>
